<template>
  <div class="student-table">
    <h2>学员信息管理</h2>
    <div class="controls">
      <div class="search-container">
        <button class="search-btn" @click="search">查询</button>
        <input type="text" class="search-input" v-model="searchValue" placeholder="查询学员" />
        <button class="refresh-btn" @click="fetchStudents">返回</button>
      </div>
    </div>
    <table>
      <thead>
      <tr>
        <th>学员ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>身份证</th>
        <th>住址</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(student, index) in studentInfo" :key="index">
        <td>{{student.id}}</td>
        <td>
          <template v-if="!student.editing">{{ student.username }}</template>
          <input v-else type="text" class="form-control" v-model="student.username" />
        </td>
        <td>
          <template v-if="!student.editing">{{ student.sex }}</template>
          <select v-else class="form-control" v-model="student.sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </td>
        <td>
          <template v-if="!student.editing">{{ student.age }}</template>
          <input v-else type="number" class="form-control" v-model="student.age" />
        </td>
        <td>
          <template v-if="!student.editing">{{ student.id_code }}</template>
          <input v-else type="text" class="form-control" v-model="student.id_code" />
        </td>
        <td>
          <template v-if="!student.editing">{{ student.address }}</template>
          <input v-else type="text" class="form-control" v-model="student.address" />
        </td>
        <td>
          <template v-if="!student.editing">{{ student.tel }}</template>
          <input v-else type="text" class="form-control" v-model="student.tel" />
        </td>
        <td class="actions">
          <template v-if="!student.editing">
            <button class="edit-btn" @click="student.editing = !student.editing">编辑</button>
          </template>
          <template v-else>
            <button class="save-btn" @click="saveEditedStudent(student)">保存</button>
            <button class="cancel-btn" @click="student.editing = !student.editing">取消</button>
          </template>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import './css/StudentInfo.css';
import StudentInfo from './js/StudentInfo';
export default StudentInfo;
</script>
<style scoped>

</style>